<template>
  <div
    v-loading="searchLoading"
    element-loading-text="数据加载中"
    element-loading-spinner="el-icon-loading"
  >
    <div class="head-bg head-content">
      <div class="big-img">
        <el-image :src="headBg" fit="cover"></el-image>
      </div>
      <div class="content">
        <div class="big-title">
          技转云全局搜索
        </div>
        <div class="input-container">
          <el-input
            placeholder="请输入内容"
            v-model="nowKeyWord"
            class="input-with-select"
            @keyup.enter.native="searchFun"
          >
            <el-button
              slot="append"
              type="warning"
              icon="el-icon-search"
              @click="searchFun"
            >
              搜索
            </el-button>
          </el-input>
        </div>
      </div>
    </div>

    <div class="w-1200-container">
      <div
        v-for="moduleItem in searchModuleList"
        :key="moduleItem.title"
        class="py-8"
      >
        <h2 class="p-4 font-bold  border-b-2">
          {{ moduleItem.title }}
        </h2>
        <ul class="list-container">
          <li
            v-for="item in moduleItem.list"
            :key="item.id"
            class="p-4 text-xl  cursor-pointer"
            @click="toDetail(moduleItem, item)"
          >
            {{ item.title ? item.title : item.name }}
          </li>
          <div v-if="moduleItem.list.length <= 0">
            <div class="  w-full py-8 text-xl text-center text-gray-500">
              暂无数据
            </div>
          </div>
        </ul>

        <!-- <pagination
          :total="moduleItem.listTotal"
          :page.sync="moduleItem.query.pageNum"
          :limit.sync="moduleItem.query.pageSize"
          @pagination="getModuleList"
        /> -->
      </div>

      <!-- <div class="py-4">
        <h2 class="p-4 font-bold">
          高校院所列表展示
        </h2>
        <ul class="list-container">
          <li v-for="item in schoolList" :key="item.id" class="p-4">
            {{ item.title }}
          </li>
        </ul>
      </div>

      <div class="py-4">
        <h2 class="p-4 font-bold">
          政策列表展示
        </h2>
        <ul class="list-container">
          <li v-for="item in policyList" :key="item.id" class="p-4">
            {{ item.title }}
          </li>
        </ul>
      </div>

      <div class="py-4">
        <h2 class="p-4 font-bold">
          技术专家列表展示
        </h2>
        <ul class="list-container">
          <li v-for="item in techExpertList" :key="item.id" class="p-4">
            {{ item.title }}
          </li>
        </ul>
      </div>

      <div class="py-4">
        <h2 class="p-4 font-bold">
          技术需求列表展示
        </h2>
        <ul class="list-container">
          <li v-for="item in techNeedList" :key="item.id" class="p-4">
            {{ item.title }}
          </li>
        </ul>
      </div> -->
    </div>
  </div>
</template>

<script>
import {
  searchAchList,
  searchSchoolList,
  searchPolicyList,
  searchTechExpertList,
  searchTechNeedList,
} from '@/api/search'
export default {
  data() {
    return {
      headBg: 'https://w.wallhaven.cc/full/l3/wallhaven-l3kkxr.png',
      searchLoading: false,
      nowKeyWord: '',

      searchModuleList: [
        {
          title: '科技成果',
          listTotal: 0,
          list: [],
          getListFunName: 'searchAchListFun',
          detialRoute: '/techSource/techAchievements/techAchievementDetail/',
          query: {
            // pageSize: 10,
            // pageNum: 1,
            title: '',
          },
        },
        {
          title: '高校院所',
          listTotal: 0,
          list: [],
          getListFunName: 'searchSchoolListFun',

          detialRoute: '/techSource/schools/schoolDetail/',
          query: {
            // pageSize: 10,
            // pageNum: 1,
            title: '',
          },
        },
        {
          title: '政策列表',
          listTotal: 0,
          list: [],
          getListFunName: 'searchPolicyListFun',
          detialRoute: '',
          query: {
            // pageSize: 10,
            // pageNum: 1,
            title: '',
          },
        },
        {
          title: '技术专家',
          listTotal: 0,
          list: [],
          getListFunName: 'searchTechExpertListFun',
          detialRoute: '/techSource/expertBase/expertBaseDetail/',
          query: {
            // pageSize: 10,
            // pageNum: 1,
            name: '',
          },
        },
        {
          title: '技术需求',
          listTotal: 0,
          list: [],
          getListFunName: 'searchTechNeedListFun',
          detialRoute: '/techSource/techNeed/techNeedDetail/',
          query: {
            // pageSize: 10,
            // pageNum: 1,
            title: '',
          },
        },
      ],

      // achTotal: 0,
      // achList: [],
      // achListQuery: {
      //   pageSize: 10,
      //   pageNum: 1,
      //   title: '',
      // },

      // schoolTotal: 0,
      // schoolList: [],
      // schoolQuery: {
      //   pageSize: 10,
      //   pageNum: 1,
      //   title: '',
      // },

      // policyTotal: 0,
      // policyList: [],
      // policyQuery: {
      //   pageSize: 10,
      //   pageNum: 1,
      //   title: '',
      // },

      // techExpertTotal: 0,
      // techExpertList: [],
      // techExpertQuery: {
      //   pageSize: 10,
      //   pageNum: 1,
      //   title: '',
      // },

      // techNeedTotal: 0,
      // techNeedList: [],
      // techNeedQuery: {
      //   pageSize: 10,
      //   pageNum: 1,
      //   title: '',
      // },
    }
  },
  watch: {
    $route(v) {
      this.getInfoByWord(v.query.keyWord)
      this.initNowRoute()
    },
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      let keyWord = to.query.keyWord
      vm.nowKeyWord = keyWord
    })
  },
  created() {
    let keyWord = this.$route.query.keyWord
    this.getInfoByWord(keyWord)
    this.initNowRoute()
  },
  methods: {
    initNowRoute() {},
    searchFun() {
      this.$router.push({
        path: '/search',
        query: { keyWord: this.nowKeyWord },
      })
      // this.getInfoByWord(this.nowKeyWord)
      // let nowRoute = this.$route
    },

    searchAchListFun(query) {
      return searchAchList(query)
    },

    searchSchoolListFun(query) {
      return searchSchoolList(query)
    },

    searchPolicyListFun(query) {
      return searchPolicyList(query)
    },

    searchTechExpertListFun(query) {
      return searchTechExpertList(query)
    },

    searchTechNeedListFun(query) {
      return searchTechNeedList(query)
    },

    toDetail(moduleItem, item) {
      let routeDetail = moduleItem.detialRoute
      if (!routeDetail) {
        return
      }
      this.$router.push({ path: routeDetail + item.id })
    },

    getInfoByWord(keyWord) {
      if (!keyWord) {
        this.$message({
          type: 'error',
          message: '请输入关键字再搜索',
        })
        return
      }
      this.searchLoading = true
      this.nowKeyWord = keyWord
      let promiseArr = []
      for (let i = 0; i < this.searchModuleList.length; i++) {
        const element = this.searchModuleList[i]

        let query = element.query
        if (query?.title !== undefined) {
          element.query.title = keyWord
        }
        if (query?.name !== undefined) {
          element.query.name = keyWord
        }
        promiseArr[i] = this[element.getListFunName](element.query)
      }
      Promise.all(promiseArr)
        .then((resList) => {
          this.searchLoading = false
          for (let index = 0; index < resList.length; index++) {
            const element = resList[index]
            if (element.code === 200) {
              this.searchModuleList[index].list = element.rows
              this.searchModuleList[index].listTotal = element.total
            }
          }
        })
        .finally(() => {
          this.searchLoading = false
        })

      // this.achListQuery.title = keyWord

      // let searchAchP = searchAchList(this.achListQuery).then((res) => {
      //   if (res.code == 200) {
      //     this.achTotal = res.total
      //     this.achList = res.rows
      //   }
      // })

      // this.schoolQuery.title = keyWord
      // let searchSchoolP = searchSchoolList(this.schoolQuery).then((res) => {
      //   if (res.code == 200) {
      //     this.schoolTotal = res.total
      //     this.schoolList = res.rows
      //   }
      // })

      // this.policyQuery.title = keyWord
      // let searchPolicyP = searchPolicyList(this.policyQuery).then((res) => {
      //   if (res.code == 200) {
      //     this.policyTotal = res.total
      //     this.policyList = res.rows
      //   }
      // })

      // this.techExpertQuery.title = keyWord
      // let searchTechExpertP = searchTechExpertList(this.techExpertQuery).then(
      //   (res) => {
      //     if (res.code == 200) {
      //       this.techExpertTotal = res.total
      //       this.techExpertList = res.rows
      //     }
      //   }
      // )

      // this.techNeedQuery.title = keyWord
      // let searchTechNeedP = searchTechNeedList(this.techNeedQuery).then(
      //   (res) => {
      //     if (res.code == 200) {
      //       this.techNeedTotal = res.total
      //       this.techNeedList = res.rows
      //     }
      //   }
      // )

      // Promise.all([
      //   searchAchP,
      //   searchSchoolP,
      //   searchPolicyP,
      //   searchTechExpertP,
      //   searchTechNeedP,
      // ]).then((resList) => {
      //   let achRes = resList[0]
      //   if (achRes.code == 200) {
      //     this.achTotal = achRes.total
      //     this.achList = achRes.rows
      //   }

      //   let schoolRes = resList[1]
      //   if (schoolRes.code == 200) {
      //     this.schoolTotal = schoolRes.total
      //     this.schoolList = schoolRes.rows
      //   }

      //   let policyRes = resList[2]
      //   if (policyRes.code == 200) {
      //     this.policyTotal = policyRes.total
      //     this.policyList = policyRes.rows
      //   }

      // let policyRes = resList[3]
      // if (policyRes.code == 200) {
      //   this.policyTotal = policyRes.total
      //   this.policyList = policyRes.rows
      // }
      // })
    },

    getModuleList(moduleIndex) {
      let getInfoFunName = this.searchModuleList[moduleIndex]
      getInfoFunName['getListFunName']()
    },
  },
}
</script>

<style lang="scss" scoped>
.head-content {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;

  .big-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .content {
    z-index: 10;
    .big-title {
      font-size: 3.5rem;
      height: 3.5rem;
      line-height: 3.5rem;
      text-align: center;
      margin-bottom: 2rem;
    }
    .input-container {
      margin-bottom: 24px;
      ::v-deep .el-input-group__append {
        background-color: #f08519 !important;
        border-color: #f08519;
        color: #ffffff;
      }
      ::v-deep .el-input-group {
        width: 650px;
        height: 4rem;

        .el-input__inner {
          width: 500px;
          height: 4rem;
          font-size: 1.2rem;
        }
        .el-button {
          width: 150px;
        }
      }
    }
    .sub-title {
      font-size: 24px;
      text-align: center;
    }
  }
}
.list-container {
  min-height: 200px;
  list-style: square;
  list-style-position: inside;
}
</style>
